<template>
  <pad class="invite">
    <div class="invite-userInfo">
      <img :src="inviteUser.headImgUrl" alt class="avatar" />
      <div class="txt">
        <div class="name">您的好友 {{ inviteUser.name }} 邀请您来献浆</div>
        <div class="code">邀请码：{{ inviteUser.inviteCode }}</div>
      </div>
    </div>
    <div class="invite-form" v-if="!userInfo.realName">
      <ValidationObserver
        ref="observer"
        v-slot="{ passes, invalid }"
        tag="form"
        @submit.prevent="submit()"
      >
        <van-cell-group>
          <ValidationProvider name="姓名" rules="required|isName" v-slot="{ errors }">
            <van-field
              v-model="form.name"
              placeholder="请输入姓名"
              label="姓名"
              clearable
              :error-message="errors[0]"
            />
          </ValidationProvider>

          <sex v-model="form.sex" />

          <ValidationProvider name="身份证号" rules="required|isIdCard" v-slot="{ errors }">
            <van-field
              v-model="form.idCard"
              placeholder="请输入身份证号"
              label="身份证号"
              clearable
              :error-message="errors[0]"
            />
          </ValidationProvider>

          <area-list v-model="form.area" />

          <town v-model="form.town" />

          <ValidationProvider name="联系方式" rules="required|isPhone" v-slot="{ errors }">
            <van-field
              v-model="form.phone"
              placeholder="请输入联系方式"
              label="联系方式"
              clearable
              :error-message="errors[0]"
            />
          </ValidationProvider>

          <ValidationProvider name="供浆证号">
            <van-field v-model="form.bloodCard" placeholder="请输入供浆证号" label="供浆证号" clearable />
          </ValidationProvider>
        </van-cell-group>
        <div class="btn-wrapper">
          <van-button type="primary" block :disabled="invalid" round color="#4482FF">提交</van-button>
        </div>
      </ValidationObserver>
    </div>
    <div class="second">
      <img src="./img/footer.png" alt style="width:100%;" />
      <div class="container">
        <div class="item">
          <div class="tit">
            <strong>01</strong>免费的体检
          </div>
          <div class="content">献血浆可以做免费的体检，可以对身体健康问题做到早发现早预防早治疗。</div>
        </div>
        <div class="item">
          <div class="tit">
            <strong>02</strong>献血可以刺激人体的造血功能
          </div>
          <div class="content">让造血功能更加旺盛，从而保持比较旺盛的新陈代谢，不断产生更具活力的年轻细胞。</div>
        </div>
        <div class="item">
          <div class="tit">
            <strong>03</strong>可以预防三高
          </div>
          <div class="content">降低心脑血管疾病的发生率和风湿因子，所以适量献浆是对身体有益无害的。</div>
        </div>
      </div>
    </div>
  </pad>
</template>

<script>
import { Toast } from "vant";
import Pad from "@/components/pad";
import { mapGetters } from "vuex";
import wx from "weixin-js-sdk";
import { realNameAuth, inviteUserInfo } from "@/api/user";
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import zh from "vee-validate/dist/locale/zh_CN";
import Sex from "@/views/userInfo/components/sex";
import AreaList from "@/views/userInfo/components/area";
import Town from "@/views/userInfo/components/town";

extend("isName", {
  validate: value => {
    const reg = /^[\u4e00-\u9fef\u3400-\u4DB5]{2,5}$/;
    return reg.test(value);
  },
  message: "请填写正确姓名"
});
extend("isIdCard", {
  validate: value => {
    const reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X))$/;
    return reg.test(value);
  },
  message: "请填写正确的身份证号"
});
extend("isPhone", {
  validate: value => {
    const reg = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
    return reg.test(value);
  },
  message: "请填写正确的手机号"
});
extend("required", {
  ...required,
  message: zh.messages["required"]
});

export default {
  data() {
    return {
      inviteUser: "",
      form: {
        name: "",
        sex: "",
        idCard: "",
        area: "",
        town: "",
        phone: "",
        bloodCard: ""
      }
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: {
    Pad,
    ValidationObserver,
    ValidationProvider,
    Sex,
    AreaList,
    Town
  },
  created() {
    const _this = this;
    const inviteCode = this.$route.query.inviteCode;
    if (inviteCode) {
      inviteUserInfo({ inviteCode }).then(({ data }) => {
        console.log(data);
        this.inviteUser = data;
      });
    }

    if(this.userInfo.realName){
      this.$router.push('home')
    }

    const link = window.location.href;

    wx.ready(function() {
      wx.onMenuShareAppMessage({
        title: "参与献浆,让爱传递", // 分享标题
        desc: "让我们共同参与帮助更多人", // 分享描述
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          "http://oss.tjzxsw.com/imgUpload/20191115/jyBloodLicense/58fb88b4-f4be-421d-a121-24c3c7898624.png", // 分享图标
        success: function() {}
      });

      wx.onMenuShareTimeline({
        title: "参与献浆,让爱传递", // 分享标题
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "", // 分享图标
        success: function() {}
      });
    });
  },
  methods: {
    submit(obj) {
      console.log("submit");
      Toast.loading({
        message: "正在实名认证个人信息，请稍等...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 0
      });
      var data = {
        name: this.form.name,
        sex: this.form.sex,
        idCard: this.form.idCard,
        province: this.form.area[0],
        city: this.form.area[1],
        county: this.form.area[2],
        town: this.form.town,
        phone: this.form.phone,
        bloodCard: this.form.bloodCard,
        inviteCode: this.$route.query.inviteCode
      };
      console.log(data);
      realNameAuth(data)
        .then(res => {
          Toast.clear();
          if (res.code == 1102) {
            // 该地区尚未开通浆站提示
            this.$tip.show({ type: 2 });
          } else {
            Toast.success("实名认证成功！");
          }
          this.$router.push("home");
        })
        .catch(err => {
          Toast.clear();
          Toast.success("实名认证失败!");
        });
    }
  }
};
</script>
<style lang='scss'>
.invite {
  background-color: #fc5859;

  %layout {
    background-color: #fff;
    border-radius: 0.266667rem /* 20/75 */;
  }

  &-userInfo {
    background: #fff;
    border-radius: 0.213333rem /* 16/75 */;
    padding: 0.4rem /* 30/75 */;
    display: flex;
    margin-bottom: 0.4rem /* 30/75 */;
    .avatar {
      width: 1.6rem /* 120/75 */;
      height: 1.6rem /* 120/75 */;
      border-radius: 50%;
      margin-right: 0.533333rem /* 40/75 */;
    }
    .txt {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      .name {
        font-size: 0.32rem /* 24/75 */;
        color: #333;
        margin-bottom: 0.266667rem /* 20/75 */;
      }
      .code {
        font-size: 0.4rem /* 30/75 */;
        color: #666;
      }
    }
  }

  &-form {
    background: #fff;
    border-radius: 0.213333rem /* 16/75 */;
    padding: 0.4rem /* 30/75 */;
    margin-bottom: 0.4rem /* 30/75 */;
  }

  .second {
    @extend %layout;
    padding-top: 0.773333rem /* 58/75 */;
    margin-bottom: 0.4rem /* 30/75 */;
    .container {
      position: relative;
      width: 8.133333rem /* 610/75 */;
      margin: 0 auto 0.426667rem /* 32/75 */ auto;
      padding: 0.426667rem /* 32/75 */;
      padding-top: 1.093333rem /* 82/75 */;
      border-radius: 0.266667rem /* 20/75 */;
      .title {
        position: absolute;
        left: 50%;
        top: -0.56rem /* 42/75 */;
        transform: translate(-50%, 0);
        text-align: center;
        width: 4.266667rem /* 320/75 */;
        height: 1.12rem /* 84/75 */;
        line-height: 1.12rem /* 84/75 */;
        background-color: #fc5859;
        font-size: 0.533333rem /* 40/75 */;
        color: #fff;
        border-radius: 0.56rem /* 42/75 */;
      }
      .item {
        margin-bottom: 0.56rem /* 42/75 */;
        strong {
          color: #fc5859;
          font-size: 0.8rem /* 60/75 */;
          margin-right: 0.4rem /* 30/75 */;
        }
        .tit {
          color: #2285ff;
          font-size: 0.4rem /* 30/75 */;
          margin-bottom: 0.24rem /* 18/75 */;
          display: flex;
          align-items: center;
        }
        .content {
          font-size: 0.32rem /* 24/75 */;
          color: #2285ff;
          opacity: 0.4;
          line-height: 0.533333rem /* 40/75 */;
        }
      }
    }
    .tips {
      .tit {
        font-size: 0.4rem /* 30/75 */;
        color: #fc5859;
        margin-bottom: 0.426667rem /* 32/75 */;
      }
      .content {
        font-size: 0.32rem /* 24/75 */;
        color: #fc5859;
        line-height: 0.533333rem /* 40/75 */;
      }
    }
  }
}
</style>
